<template>
  <div class="asetting_content cf w1 h1">
    <nav class="asetting_c-left fl">
      <Menu class="asetting-l-nav" style="width:100%;" @on-select="onChangeRoue" :active-name="activeName">
        <MenuItem name="/iot">
        <i class="fa fa-calculator"></i>
        <span>产品列表</span>
        </MenuItem>
        <MenuItem name="/iot/device">
        <i class="fa fa-tablet"></i>
        <span>设备管理</span>
        </MenuItem>
        <MenuItem name="/iot/alert">
        <i class="fa fa-bullhorn"></i>
        <span>报警事件</span>
        </MenuItem>
        <MenuItem name="/iot/history">
        <i class="fa fa-database"></i>
        <span>历史数据</span>
        </MenuItem>
      </Menu>
    </nav>
    <div class="asetting_c-right fr">
      <transition name="fade-transverse">
        <router-view />
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onChangeRoue(path) {
      this.$router.push({ path })
    }
  },
  computed: {
    activeName() {
      if (this.$route.path === '/iot') {
        return '/iot'
      } else if (this.$route.path.startsWith('/iot/device')) {
        return '/iot/device'
      } else if (this.$route.path.startsWith('/iot/alert')) {
        return '/iot/alert'
      } else if (this.$route.path.startsWith('/iot/history')) {
        return '/iot/history'
      }
    }
  }
}
</script>
